<template>
  <main class="apply_main_wrapper">
    <!-- 头部背景 -->
    <div class="apply_headimg" v-if="not_apply_background || apply_background">
      <img v-if="need_apply_condition == 0" :src="apply_background" mode="widthFix" alt />
      <img v-else :src="not_apply_background" mode="widthFix" alt />
    </div>

    <div class="apply_wrapper" v-if="need_apply_condition == 0">
      <section class="apply_tip">
        欢迎加入
        <span>{{ shop_info.title }}</span>，请填写申请信息！
      </section>
      <div class="cashnote" v-if="display_apply_condition && (audit_amount || audit_num || audit_item_id )">
        <span class="icon_arrow"></span>
        <p>
          <strong>温馨提示：</strong><br />
          <span v-if="audit_amount || audit_num">本店累计</span>
          <span v-if="audit_amount">消费{{audit_amount}}元</span>
          <span v-if="audit_amount && audit_num">
            <span v-if="audit_map == 1">或</span>
            <span v-else>且</span>
            交易次数达到{{audit_num}}次
          </span>
          <span v-else-if="audit_num">交易次数达到{{audit_num}}次</span>
          <span v-if="audit_item_id">
            <span v-if="audit_amount || audit_num">或</span>
            <a @click="openLink(click_link)">点击购买<span v-if="automatic_item_map==1">全部</span>
              <span v-else>1件</span>指定商品</a>
          </span>
          <span v-if="superior_count > 0">
            <span v-if="audit_amount || audit_num || audit_item_id">
              ,并且一级下级人数不小于{{superior_count}}人</span>
            <span v-else>
              一级下级人数不小于{{superior_count}}人
            </span>
          </span>
          才能成为{{ftitle_agents}}。
        </p>
      </div>
    </div>
    <div class="apply_wrapper_cont">
      <div class="apply_wrapper" v-if="apply_config">
        <div class="addurl_con">
          <ul>
            <div v-if="need_apply_type == 1">
              <!-- 申请类型 -->
              <li class="clearfix">
                <label> <b class="colorRed">*</b>类型</label>
                <div class="w60 fr">
                  <van-radio-group v-model="submitFormData.apply_type">
                    <div class="fl radioChange">
                      <van-radio :name="2" icon-size="16px">企业</van-radio>
                    </div>
                    <div class="fl  radioChange">
                      <van-radio :name="1" icon-size="16px">个人</van-radio>
                    </div>
                  </van-radio-group>
                </div>
              </li>
            </div>
            <!-- 公司名称-->
            <li v-if="submitFormData.apply_type == 2 && company_name.display==1" class="clearfix">
              <label><b v-if="company_name.must==1" class="colorRed">* </b>{{company_name.name}}</label>
              <div class="w60 fr">
                <input :placeholder="'请填写'+company_name.name" v-model="submitFormData.company_name" class="textw"
                  data-require="1">
              </div>
            </li>
            <!-- 营业执照号-->
            <li v-if="submitFormData.apply_type == 2 && business_licence_num.display==1" class="clearfix">
              <label><b v-if="business_licence_num.must==1" class="colorRed">*
                </b>{{business_licence_num.name}}</label>
                <div class="w60 fr">
                  <input :placeholder="'请填写'+business_licence_num.name" v-model="submitFormData.business_licence_num"
                    class="textw" data-require="1">
                </div>
            </li>
            <!-- 上传营业执照-->
            <li v-if="submitFormData.apply_type == 2 && business_licence_img.display==1" class="clearfix autoHeight">
              <label><b v-if="business_licence_img.must==1" class="colorRed">*
                </b>{{business_licence_img.name}}</label>
                <div class="w60 fr">
                  <!-- TODO 上传图片 -->
                  <SmallUploadImg ref="smallUploadImgYYZZ" :maxLength="1"></SmallUploadImg>
                  <span v-if="business_licence_txt">{{ business_licence_txt }}</span>
                </div>
            </li>
            <!-- 身份证号-->
            <li v-if="card_num.display==1" class="clearfix">
              <label><b v-if="card_num.must==1" class="colorRed">* </b>{{card_num.name}}</label>
              <div class="w60 fr">
                <input class="textw" :placeholder="'请填写'+card_num.name" value="" v-model="submitFormData.card_num"
                  data-require="1">
              </div>
            </li>
            <!-- 上传身份证-->
            <li v-if="card_img.display==1" class="clearfix autoHeight">
              <label><b v-if="card_img.must==1" class="colorRed">* </b>{{card_img.name}}</label>
              <div class="w60 fr">
                <!-- TODO 上传图片 -->
                <SmallUploadImg ref="smallUploadImgCardPos" :maxLength="1"></SmallUploadImg>
                <span v-if="card_positive_txt">{{ card_positive_txt }}</span>
              </div>
            </li>
            <!-- 性别 -->
            <li v-if="sex.display==1" class="clearfix">
              <label> <b v-if="sex.must==1" class="colorRed">*</b>{{sex.name}}</label>
              <div class="w60 fr">
                <van-radio-group v-model="submitFormData.sex">
                  <div class="fl radioChange">
                    <van-radio :name="1" icon-size="16px">男</van-radio>
                  </div>
                  <div class="fl  radioChange">
                    <van-radio :name="2" icon-size="16px">女</van-radio>
                  </div>
                  <div class="fl  radioChange">
                    <van-radio :name="3" icon-size="16px">保密</van-radio>
                  </div>
                </van-radio-group>
              </div>
            </li>
            <!-- 申请人-->

            <li v-if="agent_name.display==1" class="clearfix">
              <label><b v-if="agent_name.must==1" class="colorRed">* </b>{{agent_name.name}}</label>
              <div class="w60 fr">
                <input :placeholder="'请填写'+agent_name.name" v-model="submitFormData.agent_name" class="textw">
              </div>
            </li>
            <!-- 联系人电话-->
            <li v-if="apply_mobile.display==1" class="clearfix">
              <label><b v-if="apply_mobile.must==1" class="colorRed">* </b>{{apply_mobile.name}}</label>
              <div class="w60 fr">
                <input :placeholder="'请填写'+apply_mobile.name" v-model="submitFormData.apply_mobile" class="textw"
                  @blur="refreshVerify" data-require="1">
              </div>
            </li>

            <!-- 验证码-->
            <li class="clearfix list-item" style="position:relative" v-if="check_apply_mobile == 1 && apply_mobile.display==1">
              <label>
                <b class="colorRed"></b>验证码
              </label>
              <div class="w60 fr">
                <input type="text" placeholder="请填写验证码" class="textw textw_code fl" v-model="submitFormData.code"  style="width: 50%"/>
                <img :src="verifyImg" class="verify-img" @click="refreshVerify" />
              </div>
            </li>

            <!--获取验证码-->
            <li v-if="check_apply_mobile == 1 && apply_mobile.display==1" class="clearfix">
              <label><b class="colorRed">* </b>短信验证码</label>
              <div class="w60 fr">
                <input placeholder="请填写验证码" v-model="submitFormData.vcode" class="textw fl" style="width: 50%">
                <a class="msg-verify-btn" href="javascript:;" @click="refreshmsgVerify">{{msgVerifyTxt}}</a>
              </div>
            </li>

            <!-- 微信号-->
            <li v-if="apply_weixin.display==1" class="clearfix">
              <label><b v-if="apply_weixin.must==1" class="colorRed">* </b>{{apply_weixin.name}}</label>
              <div class="w60 fr">
                <input :placeholder="'请填写'+apply_weixin.name" v-model="submitFormData.apply_weixin" class="textw"
                  data-require="1">
              </div>
            </li>

            <!-- 地址信息-->
            <li v-if="apply_address.display==1" class="clearfix">
              <label><b v-if="apply_address.must==1" class="colorRed">* </b>{{apply_address.name}}</label>

              <div class="w60 fr">
                <small-area-picker class="area-picker" @procityareaInfo="procityareaInfo"></small-area-picker>
              </div>
              
            </li>
            <!-- 详细地址-->
            <li v-if="apply_address.display==1" class="clearfix">
              <label><b v-if="apply_address.must==1" class="colorRed">* </b>{{apply_address.name}}</label>
              <div class="w60 fr">
                <input :name="apply_address.key" :placeholder="'请填写'+apply_address.name"
                  v-model="submitFormData.apply_address" class="textw">
              </div>
            </li>
            <!-- 备注1-->
            <li v-if="apply_notes.display==1" class="clearfix liArea">
              <label><b v-if="apply_notes.must==1" class="colorRed">* </b>{{apply_notes.name}}</label>
              <div class="w60 textarea-wx-box fr">
                <textarea id="apply_notes" :placeholder="'请填写'+apply_statement" v-model="submitFormData.apply_notes"
                  class="textw" data-require="1" @blur="blurEvent()" v-show="showTextarea">
                </textarea>

                <div v-show="!showTextarea" @click="textareaFocus" class="textarea-cover" :class="submitFormData.apply_notes?'hasTxt':''">{{submitFormData.apply_notes?submitFormData.apply_notes:'请填写'+apply_statement}}</div>
              </div>

            </li>
            <li v-if="item.display" v-for="item in extra_config" :key="item.key" class="clearfix">
              <div>
                <label><b v-if="item.must==1" class="colorRed">* </b>{{item.name}}</label>
                <div class="w60 fr">
                  <input :name="item.key" :placeholder="'请填写'+item.name" v-model="item.value" class="textw">
                </div>
              </div>
            </li>
          </ul>
          <div>
            <section>
              <span class="agreenment agreenment_dls">
                <div v-if="apply_agreement || contract_documents" class="agreenment-inline">
                  <van-checkbox icon-size="14px" shape="square" v-model="submitFormData.need_apply_agreement">我已阅读并同意
                  </van-checkbox>
                </div>
                <span v-if="apply_agreement" @click="agreementContent = !agreementContent"
                  class="J-showAgreement-title colorBlue">《{{ ftitle_agents }}申请协议》</span>
                <a v-if="contract_documents" @click="downloadDoc(contract_documents)" class="contract_documents j-download"
                  :download="distributor_contract_name ? distributor_contract_name : '分销商合同'"><span class="colorBlue">《{{ distributor_contract_name ? distributor_contract_name : '分销商合同' }}》</span></a>
              </span>
            </section>
            <div v-show="agreementContent && apply_agreement" class="apply_agreement apply_agreement_dls"
              style="display: block;">
              <section class="txt">
                <p class="fxs-app-txt"></p>
              </section>
              
            </div>
            <section
              class="mlogin_but"
              v-if="meet_the_conditions == 0"><a href="javascript:;" class="J-addApply" @click="handleClickApply">同意协议并申请</a></section>
            <section
              v-else
              class="mlogin_but" ><a href="javascript:;" class="J-addApply" @click="handleClickGoTo">再去逛逛</a></section>
          </div>
        </div>
      </div>
      <!-- 申请条件 -->
      <div class="ts_txt" v-if="(audit_amount || audit_num || audit_item_id ) && (need_apply_condition == 1)">
        <p>
          <span v-if="audit_amount || audit_num">本店累计</span>
          <span v-if="audit_amount">消费{{audit_amount}}元</span>
          <span v-if="audit_amount && audit_num">
            <span v-if="audit_map == 1">或</span>
            <span v-else>且</span>
            交易次数达到{{audit_num}}次
          </span>
          <span v-else-if="audit_num">交易次数达到{{audit_num}}次</span>
          <span v-if="audit_item_id">
            <span v-if="audit_amount || audit_num">或</span>
            <a class="fontBlue" @click="openLink(click_link)">点击购买<span v-if="automatic_item_map">全部</span>
              <span v-else>1件</span>指定商品</a>
          </span>
          <span v-if="superior_count > 0">
            <span v-if="audit_amount || audit_num || audit_item_id">
              ,并且一级下级人数不小于{{superior_count}}人</span>
            <span v-else>
              一级下级人数不小于{{superior_count}}人
            </span>
          </span>
          才能成为{{ftitle_agents}}，请继续努力
        </p>
      </div>
      <section class="apply_explain" v-if="need_apply_condition == 1">
        <div class="hd">
          <p>申请说明</p>
        </div>
        <p class="des" :style="`font-size: ${not_apply_font_size}px; color: ${not_apply_font_color}`" v-html="apply_illustrate">
        </p>
      </section>
      <section v-if="is_show_privilege == 1" class="privilege" :class="{'need': need_apply_condition != 0}">
        <div class="hd">
          <p>{{ftitle_agents}}特权</p>
        </div>
        <div class="bd">
          <ul>
            <li class="one">
              <p class="p1">{{agent_privilege_one}}</p>
              <p class="p2">{{privilege_one_supply}}</p>
            </li>
            <li class="two">
              <p class="p1">{{agent_privilege_two}}</p>
              <p class="p2">{{privilege_two_supply}}</p>
            </li>
            <li class="three">
              <p class="p2">{{privilege_three_supply}}</p>
            </li>
          </ul>
        </div>
      </section>
    </div>
    <map-area :visible.sync="showAreaPop" @onSelect="handleConfirm"></map-area>
    <share-btn v-if="application_poster_switch" type="1"></share-btn>
  </main>
</template>

<script>
  /*
   * @Author: cd@360shop.cn
   * @Date: 2019-09-26 16:48:09
 * @Last Modified by: zhangmeng
 * @Last Modified time: 2020-07-02 20:04:13
   */
  import mapArea from '@/components/mapArea'
  import shareBtn from '../../component/shareBtn'

  import {
    postMsgVerify,
    getVerify
  } from '@/api/loginRegister/index'
  import {
    fxsRequest,
    agentApply
  } from '@/api/identityApplication/identityApplication'
  import {
    uploadImgs
  } from '@/api/community/article'
  import {
    validateMobile
  } from '@/utils/validate'
  import SmallUploadImg from '@/components/SmallUploadImg'
  import SmallAreaPicker from '@/components/smallAreaPicker/smallareapicker.vue'
  import { base64_encode } from '@/utils/index'
  import { openPage } from '@/utils/utils'
  import Vue from 'vue'
  import {
    RadioGroup,
    Radio,
    Checkbox,
    CheckboxGroup
  } from 'vant'
  Vue.use(RadioGroup)
  Vue.use(Radio)
  Vue.use(Checkbox)
  Vue.use(CheckboxGroup)

  export default Vue.extend({
    name: 'common',
    components: {
      mapArea,
      SmallUploadImg,
      SmallAreaPicker,
      shareBtn
    },
    data() {
      return {
        showAreaPop: false,
        areaBtnText: '请选择',
        msgVerifyTxt: '获取验证码',
        shop_info: {},
        business_licence_txt: '',
        card_positive_txt: '', // 上传成功后的提示
        agreementContent: true,
        distributor_contract_name: '',
        need_apply_condition: 0,
        contract_documents: '',
        is_show_privilege: '',
        agent_privilege_one: '',
        privilege_one_supply: '',
        agent_privilege_two: '',
        privilege_two_supply: '',
        privilege_three_supply: '',
        ftitle_agents: '',
        apply_statement: '',
        apply_head_title: '',
        extra_config: '',
        apply_config: '',
        check_apply_mobile: 0,
        need_apply_type: 0,
        apply_agreement: '',
        apply_background: '',
        not_apply_background: '',
        dis_page: '',
        last_address: '',
        last_name: '',
        last_mobile: '',
        audit_order_status: '',
        audit_map: '',
        audit_num: '',
        audit_amount: '',
        audit_item_id: '',
        superior_count: '',
        automatic_item_map: '',
        click_link: '',
        display_apply_condition: '',
        need_apply_agreement: '',
        apply_illustrate: '',
        not_apply_font_size: '',
        not_apply_font_color: '',
        // 表单填写项
        company_name: {},
        business_licence_num: {},
        business_licence_img: {},
        card_num: {},
        card_img: {},
        sex: {},
        agent_name: {},
        apply_mobile: {},
        apply_weixin: {},
        apply_address: {},
        apply_notes: {},
        // 表单提交参数
        submitFormData: {
          province_id: '',
          city_id: '',
          area_id: '',
          need_apply_agreement: 0,
          apply_type: '',
          company_name: '',
          business_licence_num: '',
          business_licence_img: '',
          card_num: '',
          card_img: '',
          sex: '',
          agent_name: '',
          apply_mobile: '',
          apply_weixin: '',
          apply_address: '',
          apply_notes: ''
        },
        verifyImg: '',
        meet_the_conditions: '',
        showTextarea:false,
        application_poster_switch: 0
      }
    },
    watch: {},
    methods: {
      // TODO 小程序跳转
      openLink(link) {
        openPage(link)
      },
      // TODO 验证码
      // 刷新验证码
      refreshVerify() {
        getVerify().then((res) => {
          const src = `data:image/jpg;base64,${base64_encode(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))}`
          this.verifyImg = src
        })
      },
      // 获取验证码倒计时
      setTimeoutVerify() {
        let count = 60
        this.msgVerifyTxt = count + '秒后重新获取'
        const timer = setInterval(() => {
          this.msgVerifyTxt = count + '秒后重新获取'
          if (count <= 0) {
            this.msgVerifyTxt = '获取验证码'
            clearInterval(timer)
          }
          count--
        }, 1000)
      },
      // 获取短信验证码
      refreshmsgVerify() {
        if (this.msgVerifyTxt == '获取验证码') {
          const mobile = this.submitFormData.apply_mobile
          const code = this.submitFormData.code
          if (mobile) {
            if (code) {
              if (validateMobile(mobile)) {
                const data = {
                  mobile: mobile,
                  code: code
                }
                postMsgVerify(data).then(res => {
                  if (res.status === 1) {
                    this.setTimeoutVerify()
                    // console.log(res)
                  } else {
                    this.$Error(res.msg)
                  }
                })
              } else {
                this.$Error('请输入正确的手机号码')
                return false
              }
            } else {
              this.$Error('图片验证码不能为空')
            }
          } else {
            this.$Error('手机号不能为空')
          }
        }
      },
      fxsRequestFn() {
        fxsRequest().then(res => {
          if (res.status == 1) {
            if (res.data.status == 0) {
              this.$Error(res.data.msg)
              if (res.data.jump_url) {
                setTimeout(() => {
                  // window.location.href = res.data.jump_url
                  openPage(res.data.jump_url)
                }, 1000)
              }
            }
            const newArr = []
            const extra_config = res.data.extra_config
            if (extra_config) {
              Object.keys(extra_config).forEach((key) => {
                extra_config[key].key = key
                extra_config[key].value = ''
                newArr.push(extra_config[key])
              })
            }
            this.contract_documents = res.data.contract_documents
            this.is_show_privilege = res.data.is_show_privilege
            this.agent_privilege_one = res.data.agent_privilege_one
            this.privilege_one_supply = res.data.privilege_one_supply
            this.agent_privilege_two = res.data.agent_privilege_two
            this.privilege_two_supply = res.data.privilege_two_supply
            this.privilege_three_supply = res.data.privilege_three_supply
            this.ftitle_agents = res.data.ftitle_agents
            this.apply_statement = res.data.apply_statement || '备注'
            this.apply_head_title = res.data.apply_head_title
            this.extra_config = newArr
            this.apply_config = res.data.apply_config
            this.check_apply_mobile = res.data.check_apply_mobile
            this.need_apply_type = res.data.need_apply_type
            // TODO 后台返回的font-family 带双引号 导致innerHTML赋值时 报错parse error 暂时这么处理
            this.apply_agreement = res.data.apply_agreement? res.data.apply_agreement.replace(/font-family: "Microsoft Yahei";/g,'') : res.data.apply_agreement
            this.apply_background = res.data.apply_background
            this.not_apply_background = res.data.not_apply_background
            this.dis_page = res.data.dis_page
            this.last_address = res.data.last_address
            this.last_name = res.data.last_name
            this.last_mobile = res.data.last_mobile
            this.audit_order_status = res.data.audit_order_status
            this.audit_map = res.data.audit_map
            this.audit_num = res.data.audit_num
            this.audit_amount = res.data.audit_amount
            this.audit_item_id = res.data.audit_item_id
            this.superior_count = res.data.superior_count
            this.click_link = res.data.click_link
            this.display_apply_condition = res.data.display_apply_condition
            this.automatic_item_map = res.data.automatic_item_map
            this.not_apply_font_size = res.data.not_apply_font_size
            this.not_apply_font_color = res.data.not_apply_font_color
            this.need_apply_condition = res.data.need_apply_condition
            this.apply_illustrate = res.data.apply_illustrate
            this.need_apply_agreement = res.data.need_apply_agreement
            // 表单填写项
            if (res.data.apply_config) {
              if (res.data.apply_config.company_name) {
                this.company_name = res.data.apply_config.company_name
              }
              this.business_licence_num = res.data.apply_config.business_licence_num
              this.business_licence_img = res.data.apply_config.business_licence_img
              this.card_num = res.data.apply_config.card_num
              this.card_img = res.data.apply_config.card_img
              this.sex = res.data.apply_config.sex
              this.agent_name = res.data.apply_config.agent_name
              this.apply_mobile = res.data.apply_config.apply_mobile
              this.apply_weixin = res.data.apply_config.apply_weixin
              this.apply_address = res.data.apply_config.apply_address
              this.apply_notes = res.data.apply_config.apply_notes
            }
            this.shop_info = res.data.shop_info
            this.meet_the_conditions = res.data.meet_the_conditions
            this.again_ramble_link = res.data.again_ramble_link
            this.distributor_contract_name = res.data.distributor_contract_name
            this.application_poster_switch = res.data.application_poster_switch
              wx.setNavigationBarTitle({
                title: this.apply_head_title 
              })

            // TODO 小程序渲染后台返回的html数据 使用原生js方法 v-html不会生效
              this.$nextTick(() => {
                // console.log(document.querySelector('.fxs-app-txt'),this.apply_agreement)
                if (document.querySelector('.fxs-app-txt')) {
                  document.querySelector('.fxs-app-txt').innerHTML = this.apply_agreement
                }
              })
          }
        })
      },
      /**
       * 上传营业执照
       */
      uploadBusinessLicence(file) {
        this.uploadImgsFn(file, 'businessLicence')
      },
      /**
       * 上传身份证正面
       */
      uploadCardPositive(file) {
        this.uploadImgsFn(file, 'cardPositive')
      },
      /**
       * 上传图片
       */
      uploadImgsFn(file, type) {
        const form = new FormData()
        form.append('file', file.file)
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        uploadImgs(form).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            if (type == 'businessLicence') {
              this.submitFormData.business_licence_img = res.data.pic_url
              this.business_licence_txt = '上传成功'
            } else if (type == 'cardPositive') {
              this.submitFormData.card_img = res.data.pic_url
              this.card_positive_txt = '上传成功'
            }
          } else {
            if (type == 'businessLicence') {
              this.submitFormData.business_licence_img = ''
              this.business_licence_txt = '上传失败'
            } else if (type == 'cardPositive') {
              this.submitFormData.card_img = ''
              this.card_positive_txt = '上传失败'
            }
          }
        })
      },
      // 小程序选择省市区
      procityareaInfo(val) {
        // // console.log(val, '地址信息')
        this.handleConfirm(val)
      },
      // 点击调用地址选择
      selectAddress() {
        this.showAreaPop = true
      },
      // 确认
      handleConfirm(val) {
        if (!val.province_id || !val.city_id) {
          this.$Error('请选择完整的省市县')
        } else {
          this.showAreaPop = false
          this.areaBtnText = val.province_name + ' ' + val.city_name + ' ' + val.area_name
          this.submitFormData.province_id = val.province_id
          this.submitFormData.city_id = val.city_id
          this.submitFormData.area_id = val.area_id
        }
      },
      //TODO 下载合同待处理——张猛
      downloadDoc(url){
        wx.downloadFile({
          url: url,
          success: function (res) {
            let fileType = url.substring(url.lastIndexOf(".")+1);
            if(fileType.indexOf('@') !== -1) {
              fileType = fileType.substring(0, fileType.indexOf('@'));
            }
            const tempPath = res.tempFilePath;
            const imgType = "|png|gif|jpg|jpeg|";
            if(imgType.indexOf(fileType)>0) {
              wx.saveImageToPhotosAlbum({      
                filePath: tempPath,
                success(res) {
                  // console.log('保存成功');
                  wx.showToast({
                    title: '保存成功',
                    icon: 'success',
                    duration: 2000
                  })
                },
                fail: function(err) {
                  if(err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                    wx.showModal({
                      title: '提示',
                      content: '需要您授权保存相册',
                      showCancel: false,
                      success: modalSuccess => {
                        wx.openSetting({
                          success(settingdata) {
                            if (settingdata.authSetting['scope.writePhotosAlbum']) {
                              // console.log('获取权限成功，给出再次点击图片保存到相册的提示。')
                            }else {
                              // console.log('获取权限失败，给出不给权限就无法正常使用的提示')
                            }
                          }
                        })
                      }
                    })
                  }
                }
              })
            } else {
              wx.saveFile({
                tempFilePath: tempPath, 
                success:function(res){
                  const savePath = res.savedFilePath;
                  wx.openDocument({
                    filePath: savePath,
                    fileType: fileType,
                    showMenu: true,
                    success :function(res){
                      // console.log('打开文档成功')
                    },
                  });
                },
                fail: function (err) {
                  // console.log('保存失败：', err)
                }
              })
            }
          }
        })

    },
      /**
       * 申请按钮
       */
      handleClickApply() {
        // TODO 上传图片
          this.submitFormData.business_licence_img=this.$refs.smallUploadImgYYZZ?this.$refs.smallUploadImgYYZZ.imgList[0]:''
          this.submitFormData.card_img=this.$refs.smallUploadImgCardPos?this.$refs.smallUploadImgCardPos.imgList[0]:''
        const submitFormData = Object.assign({}, this.submitFormData, true)
        submitFormData.apply_ext = {}
        if (submitFormData.need_apply_agreement) {
          submitFormData.need_apply_agreement = 1
        } else {
          submitFormData.need_apply_agreement = 0
        }
        if (this.need_apply_agreement == 1) {
          if (submitFormData.need_apply_agreement == 0) {
            this.$Error('请先同意申请协议')
            return false
          }
        }
        const extra_config = this.extra_config
        extra_config.forEach(item => {
          submitFormData.apply_ext[item.key] = item.value
        })
        this.$loadingWrap.show()
        setTimeout(() => {
          this.$loadingWrap.close()
        }, 10000)
        agentApply(submitFormData).then(res => {
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error(res.data.msg)
            setTimeout(() => {
              openPage(res.data.jump_url)
            }, 1000)
          } else {
            this.$Error(res.msg)
          }
        })
      },
      /**
       * 未满足条件的跳转
       */
      handleClickGoTo() {
        // TODO 小程序跳转
          wx.redirectTo({
            url: `/pages/shopIndex/index?type=jump&targeturl=${encodeURIComponent('/index')}`
          })
      },
      //小程序textarea获得焦点
      textareaFocus(){
        this.showTextarea=true
        const textareaObj=document.querySelector('.textarea-wx-box textarea')
        textareaObj.focus()
      },
      blurEvent() {
        //小程序textarea失去焦点
        this.showTextarea=false
      },
    },
    created() {
      this.fxsRequestFn()
      this.refreshVerify()
    }
  })

</script>
<style lang="scss">
  @import "src/styles/identityApplication/index.scss";
  .apply_main_wrapper {
    width: 100%;
    .autoHeight{
      height: auto!important;
    }
    .apply_wrapper_cont {
      width: calc(100% - 50px);
      margin: 0px 25px;
      padding: 0 25px;
      box-sizing: border-box;
      border-radius: 20px;
      background-color: #fff;
      overflow: hidden;
    }

    .J-showAgreement-title {
      vertical-align: 2px;
    }

    .apply_headimg {
      width: 100%;
      height: 250px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .fontBlue {
      color: #008de1;
    }
    .area-picker{
      padding:32px 30px;
      color:#666;
    }

    .msg-verify-btn {
      display: inline-block;
      text-align: center;
      padding: 0 10px;
      border-radius: 6px;
      font-size: 26px;
      background: #F21228;
      color: #fff;
      position: absolute;
      right: 0px;
      height: 50px;
      line-height: 50px;
      margin-top: 20px;
    }

    .verify-img {
      height: 70px;
      position: absolute;
      right: 0px;
      display: inline-block;
      margin-top: 5px;
      width: 32%;
    }

    .cashnote {
      box-sizing: border-box;
      background-color: #fff;
      padding: 20px;
      position: relative;

      .icon_arrow {
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #f4f4f4;
        position: absolute;
        top: 0;
        left: 9%;
      }

      p {
        font-size: 26px;
        background: #f4f4f4;
        padding: 16px 16px;
        border-radius: 14px;
        color: #333;
        font-family: Microsoft YaHei;
        line-height: 48px;

        strong {
          font-weight: normal;
        }

        a {
          color: #78aee8;
        }
      }
    }

    .ts_txt {
      padding: 30px 20px;
      display: inline-block;
      background: #FFF2D8;
      color: #F38847;
      font-size: 26px;
      border-radius: 20px;
      font-weight: bold;
      p {
        line-height: 36px;
      }
    }

    .apply_explain {
      margin-top: 30px;
      padding: 0 40px 40px 0px;
      font-family: Microsoft YaHei;

      .hd {
        p {
          font-size: 28px;
          border-left: 6px solid #F21228;
          line-height: 30px;
          height: 32px;
          padding-left: 14px;
          letter-spacing: 1px;
          font-weight: blod;
        }
      }

      .des {
        font-size: 26px;
        color: #666;
        padding: 16px 0;
        line-height: 38px;
      }
    }

    .privilege {
      font-family: Microsoft YaHei;
      background: #fff;
      margin-top: 50px;
      margin-bottom: 40px;

      &.need {
        font-family: Microsoft YaHei;
        font-weight: bold;
        padding-bottom: 40px;
        margin: 0;
        background: none;
      }

      .hd {
        p {
          font-size: 28px;
          color: #333333;
          border-left: 6px solid #F21228;
          line-height: 30px;
          height: 32px;
          padding-left: 14px;
          letter-spacing: 1px;
          font-weight: bold;
        }
      }

      .bd {
        margin-top: 36px;

        ul {
          li {
            padding: 10px 0 16px 100px;
            position: relative;
            min-height: 80px;
            .p1 {
              color: #333;
              line-height: 48px;
              font-size: 28px;
            }

            .p2 {
              color: #999;
              font-size: 26px;
              line-height: 48px;
            }

            &.one::after,
            &.two::after,
            &.three::after {
              display: block;
              content: "";
              width: 80px;
              height: 80px;
              position: absolute;
              top: 16px;
              left: 0px;
            }

            &.one::after {
              background: url(https://img.wifenxiao.com/h5-wfx/images/identityApplication/fxs_apply1.png) no-repeat 100%/100%;
            }

            &.two::after {
              background: url(https://img.wifenxiao.com/h5-wfx/images/identityApplication/fxs_apply2.png) no-repeat 100%/100%;
            }

            &.three::after {
              background: url(https://img.wifenxiao.com/h5-wfx/images/identityApplication/fxs_apply3.png) no-repeat 100%/100%;
            }

            &.three .p2 {
              line-height: 88px;
            }
          }
        }
      }
    }

    .apply_agreement {
      .txt {
        img {
          max-width: 100% !important;
        }
      }
    }
    .van-checkbox__label {
      color: #666;
    }
    .van-radio-group {
      display: inline-block;
    }
    .van-radio__label {
      font-weight: 500;
    }
    .van-radio__icon--checked .van-icon,.van-checkbox__icon--checked .van-icon {
      background-color: #FE1B49;
      border-color: #FE1B49;
    }
  }

</style>
